終於把部落格架好了, 為了有DNS和Https花了不少時間看AWS文件, 結果朋友一篇文章就搞定了, 還跟AWS的教學完全不一樣XD
我認為Hexo部署到S3好處有幾點:
- Hexo輕巧簡單(一鍵產生靜態檔案)
- Hexo支持Markdown, 許多完善主題等玩家開發的功能
- Hexo以後部署都很簡單
- 圖片就都存到S3沒問題
- Cloudfront支持https
- Cloudfront又穩又快
事前準備
有一個Hexo專案
有一個AWS帳號
有一個DNS
先把Hexo部署到S3
先去S3建立Bucket, Bucket name可以隨便, Region 選 Tokyo比較快, 其他設定都不用動直接創立
點入剛剛創立的bucket, 點選 Properties > Static website hosting
把它設定為Use this bucket to host a website, 再設定預設檔案之後存檔即可
再來點選 Properties > Permissions > Bucket Policy
可以看到 Policy 欄位是需要輸入程式碼的, 先記下Bucket policy editor ARN (我的是 arn:aws:s3:::kurt-blog), 然後點選最下面的 Policy generator 去產生程式碼
輸入以下資訊, 比較注意的是 Amazon Resource Name (ARN) 請輸入剛剛的 ARN/*
, 輸入完後點選 Add statement
出現了以下東西直接點選 Generate Policy, 就會跳出程式碼, 全部複製到 剛剛 S3 Policy 欄位儲存即可
最後把 Block all public access 關閉, 仔細看的話他是可以選擇擋住哪些 ACLs 和 Policy, 這邊先不多追加研討, 如果全打開繼連剛剛設定的 Bucket policy 都會擋掉而失效了
Hexo安裝hexo-deployer-aws-s3這個套件,在config.yml底下輸入:1
2
3
4
5
6
7
8
9# Deployment
deploy:
type: s3
bucket: 剛剛創立的Bucket name
aws_key: your_aws_key
aws_secret: your_aws_secret
region: ap-northeast-1
headers: { CacheControl: 'max-age=604800, public' }
delete_removed: true
aws_key, aws_secret請去AWS security_credentials上,點選Access key並且create一個注意: root key 產生後會給你下載, 請妥善保管不外流, 這是最大權限的 root key, 別人取得後可以在自己的 AWS 做所有事情, 且AWS也不會再給此組 key
最後試著產生靜態檔案並且部署看看1
$ hexo g -d
如果成功的話 Bucket 裡面會有檔案
Coundfront + SSL 憑證
到AWS Cloudfront點選 Create Distribution > Web 的 Get Started
先拉到下面在ACM建立SSL
輸入*.yourdomain
, *以後就可以吃到所有子網域, 然後點選Next
建議點選 E-mail 驗證比較快注意: 他是會發到自己申請的網域平台的信箱, 而不是此 AWS 帳號的信箱喔!!
像我在 Goddaddy當初是直接利用FB登入所以WHOIS
是hotmail, 結果我在 gmail 傻傻的等了一兩天甚至寫信給客服才發現…
成功之後在 AWS ACM應該可以看到剛剛申請的憑證狀態是綠色的 issued 字樣
在回到剛剛建立 Cloudfront 的表單那裡, 點選 Custom SSL Certificate, 點一下輸入欄應該就會彈出剛剛申請好的憑證可以選, 沒有的話請嘗試著刷新頁面和查看 ACM 狀態
然後表單拉到最上方開始輸入幾個地方就好:
- Origin Domain Name 彈出視窗點選自己剛剛部署好的 Bucket
- Viewer Protocol Policy 選第二個可以把 http 導向 https
- Compress Objects Automatically 選 yes 可以做資源壓縮, 就不需要自己對檔案做優化 gzip
- Price Class: 可以選亞洲(Asia)比較便宜
- Alternate Domain Names(CNAMES): 自己等等要設定的 DNS 例如我是 blog.kurthsu.tw
接著建立完成就可以看到剛剛創立的 Cloudfront, 他的 Domain name 是
xxxxxxxx.cloundfront.net
, 拿著這個地址去自己的 DNS 創造一個 CNAME 然後指向這裡
最後, 點選剛剛創立的 Cloudfront(ID 可以點選), 點選 Origins and Origin Groups 標籤, 忘記一開始有沒有一筆 Origin Domain Name And Path, 有的話就編輯沒有的話就新增
最後到剛剛部署的 S3 bucket 的 endpoint 地址輸入到 Origin Domain Name 就大功告成!
S3 bucket 的 endpoint 在剛剛設定 Static website hosting 的地方